/**
 * 动态渲染数据
 */
// 模拟服务器上的传递过来的数据
let apiTypeData = [
  { name: "全部", keyword: "身份证实名", isnew: false },
  { name: "生活服务", keyword: "银行卡", isnew: false },
  { name: "金融科技", keyword: "短信", isnew: false },
  { name: "交通地理", keyword: "天气", isnew: false },
  { name: "充值缴费", keyword: "短信", isnew: false },
  { name: "数据智能", keyword: "手机归属地", isnew: false },
  { name: "企业工商", keyword: "IP", isnew: false },
  { name: "应用开发", keyword: "手机归属地", isnew: false },
  { name: "电子商务", keyword: "IP", isnew: false },
  { name: "吃喝玩乐", keyword: "视频", isnew: false },
  { name: "文娱视频", keyword: "视频", isnew: false },
  { name: "免费接口大全", keyword: "短信", isnew: true },
  { name: "短信", keyword: "身份证实名", isnew: false },
  { name: "汽车", keyword: "银行卡", isnew: false },
  { name: "核验", keyword: "银行卡", isnew: false },
  { name: "最新发布", keyword: "银行卡", isnew: true },
  { name: "API私有化部署", keyword: "身份证实名", isnew: true },
];
/* let apiStrHTML = "";
apiTypeData.forEach(function (v, index) {
  apiStrHTML += `
  <li class="${index === 0 ? "active" : ""} ${
    v.isnew ? "bold" : ""
  }" data-keyword='${v.keyword}'>${v.name}</li>
  `;
});
$(".api-text").innerHTML = apiStrHTML;

$(".api-text").addEventListener("click", function (ev) {
  if (ev.target.className === "LI") {
    console.log(1);
    [...$(".api-text").children].forEach(function (item) {
      item.classList.remove("active");
    });
    ev.target.classList.add("active");

    $("#api-con").textContent = ev.target.textContent;

    $(".api-pla").placeholder = ev.target.dataset.keyword;
    console.log(ev.target.dataset.keyword);
  }
}); */
// 组装html代码字符串动态渲染
let apiStr = "";
apiTypeData.forEach(function (dom, index) {
  if (index == 0) {
    apiStr += `
    <li class="active ${dom.isnew ? "bold" : ""}" data-keyword='${
      dom.keyword
    }'>${dom.name}</li>
      `;
    return;
  }
  apiStr += `
    <li class="${dom.isnew ? "bold" : ""}" data-keyword='${dom.keyword}'>${
    dom.name
  }</li>
      `;
});
$(".api-text").innerHTML = apiStr;

// 点击li切换input的api - pla的值和api - con的值;
let index = 0;
$a(".api-text>li").forEach(function (item, i) {
  item.addEventListener("click", function () {
    $a(".api-text>li")[index].classList.remove("active");
    item.classList.add("active");
    index = i;

    $("#api-con").textContent = item.textContent;
    $(".api-pla").placeholder = item.dataset.keyword;
  });
});

//API列表区域 模拟服务器返回的数据
let listDataArr = [
  //第一行
  {
    img: "API_01.jpg",
    name: "2021出行防疫政策指南",
    price: "免费",
    isSpecial: false,
  },
  {
    img: "API_02.jpg",
    name: "身份证实名认证",
    price: "￥0.2000/次",
    isSpecial: true,
  },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  {
    img: "API_04.jpg",
    name: "银行卡四元素校验",
    price: "￥0.3360/次",
    isSpecial: true,
  },
  {
    img: "API_05.jpg",
    name: "短信API服务",
    price: "￥0.0400/次",
    isSpecial: true,
  },

  //第二行
  {
    img: "API_01.jpg",
    name: "2021出行防疫政策指南",
    price: "免费",
    isSpecial: false,
  },
  {
    img: "API_02.jpg",
    name: "身份证实名认证",
    price: "￥0.2000/次",
    isSpecial: true,
  },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  {
    img: "API_04.jpg",
    name: "银行卡四元素校验",
    price: "￥0.3360/次",
    isSpecial: true,
  },
  {
    img: "API_05.jpg",
    name: "短信API服务",
    price: "￥0.0400/次",
    isSpecial: true,
  },
  //第三行
  {
    img: "API_01.jpg",
    name: "2021出行防疫政策指南",
    price: "免费",
    isSpecial: false,
  },
  {
    img: "API_02.jpg",
    name: "身份证实名认证",
    price: "￥0.2000/次",
    isSpecial: true,
  },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  {
    img: "API_04.jpg",
    name: "银行卡四元素校验",
    price: "￥0.3360/次",
    isSpecial: true,
  },
  {
    img: "API_05.jpg",
    name: "短信API服务",
    price: "￥0.0400/次",
    isSpecial: true,
  },
  //第四行
  {
    img: "API_01.jpg",
    name: "2021出行防疫政策指南",
    price: "免费",
    isSpecial: false,
  },
  {
    img: "API_02.jpg",
    name: "身份证实名认证",
    price: "￥0.2000/次",
    isSpecial: true,
  },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  {
    img: "API_04.jpg",
    name: "银行卡四元素校验",
    price: "￥0.3360/次",
    isSpecial: true,
  },
  {
    img: "API_05.jpg",
    name: "短信API服务",
    price: "￥0.0400/次",
    isSpecial: true,
  },
];

let apiHTML = "";
listDataArr.forEach(function (v) {
  apiHTML += `
  <li>
  <span class='${v.isSpecial ? "on" : ""}'>企业专用</span>
  <a href="../apidetail/apidetail.html">
    <img src="../../assets/imgs/${v.img}" alt="" />
    <p class="item-name">${v.name}</p>
    <p class="item-price ${v.price === "免费" ? "green" : "red"}">${v.price}</p>
  </a>
  <button>申请数据</button>
</li>
  `;
});
$(".api-list").innerHTML = apiHTML;

// mask
$(".api-list").addEventListener("click", function (ev) {
  if (ev.target.nodeName === "BUTTON") {
    $(".mask").style.display = "block";
  }
});
$(".mask").addEventListener("click", function (event) {
  if (event.target.className === "mask") {
    $(".mask").style.display = "none";
  }
});

let tabsLi = document.querySelectorAll(".tabs-list>li");
let tabsCont = document.querySelectorAll(".tabs-bottom>div");
tabsLi.forEach(function (li, index) {
  li.addEventListener("click", function () {
    tabsLi.forEach(function (v, i) {
      v.classList.remove("active");
      tabsCont[i].classList.remove("on");
    });
    this.classList.add("active");
    tabsCont[index].classList.add("on");
  });
});

// 手机号长度大于0显示delete
$(".phone").addEventListener("input", function () {
  if (this.value.length > 0) {
    $(".delete").style.display = "block";
  } else {
    $(".delete").style.display = "none";
  }
});
$(".delete").addEventListener("click", function () {
  $(".phone").value = "";
  this.style.display = "none";
});
$(".pwd").addEventListener("input", function () {
  if (this.value.length > 0) {
    $(".eyes").style.display = "block";
  } else {
    $(".eyes").style.display = "none";
  }
});
let flag = true;
$(".eyes").addEventListener("click", function () {
  if (flag) {
    this.src = "../../assets/imgs/open.png";
    $(".pwd").type = "text";
  } else {
    this.src = "../../assets/imgs/close.png";
    $(".pwd").type = "password";
  }
  flag = !flag;
});
let phoneReg = /^1[3-9]\d{9}$/;
$(".phone").addEventListener("blur", function () {
  let bool = phoneReg.test(this.value);
  if (bool) {
    $(".emTips").textContent = "";
  } else {
    $(".emTips").textContent = "请输入正确用户名/手机号/邮箱";
  }
});
let pwdReg = /^\d{6}$/;
$(".pwd").addEventListener("blur", function () {
  let bool = pwdReg.test(this.value);
  if (bool) {
    $(".emTips2").textContent = "";
  } else {
    $(".emTips2").textContent = "请输入六位以上密码";
  }
});

//点击form验证合法性
$(".form").addEventListener("submit", function (ev) {
  if (!phoneReg.test($(".phone").value)) {
    $(".emTips").textContent = "请输入正确用户名/手机号/邮箱";
    ev.preventDefault();
  } else if (!pwdReg.test($(".pwd").value)) {
    $(".emTips2").textContent = "请输入六位以上密码";
    ev.preventDefault();
  } else {
    alert("登录成功");
  }
});
// /**
//  *@description:接受父元素节点，生成一个登录框
//  * @param {*} fatherDom
//  */
// function generateLogin(fatherDom) {
//   let htmlStr = `
//   <div class="big-data-login">
//         <!-- logo -->
//         <div class="login-img">
//           <img src="../../assets/imgs/loginlogo.png" alt="" />
//         </div>
//         <!-- 选项卡 -->
//         <div class="tabs">
//           <div class="tabs-top">
//             <ul class="df jc ac tabs-list">
//               <li class="active">账号登录</li>
//               <span></span>
//               <li>扫码登录</li>
//             </ul>
//           </div>
//           <!-- 内容 -->
//           <div class="tabs-bottom">
//             <!-- 账号 -->
//             <div class="on">
//               <form action="" class="form">
//                 <p class="user-info">
//                   <span class="span1"></span>
//                   <input type="text" placeholder="用户名/手机号/邮箱" />
//                 </p>
//                 <p class="user-info">
//                   <span class="span2"></span>
//                   <input type="password" placeholder="密码" />
//                 </p>
//                 <a href="#" class="forget">忘记密码</a>
//                 <p>
//                   <button>登录</button>
//                 </p>
//                 <span class="account"
//                   >还没有源码账号,<a href="#">立即注册</a>
//                   <em></em>
//                 </span>
//               </form>
//             </div>
//             <!-- 扫码 -->
//             <div class="code">
//               <div class="item-content">
//                 <img src="../../assets/imgs/showqrcode.jpg" alt="" />
//                 <p>微信扫码登录</p>
//                 <p>未关注源码科技公众号，请先关注后再登录</p>
//               </div>
//               <p class="account2">还没有源码账号,<a href="#">立即注册</a></p>
//             </div>
//           </div>
//         </div>
//       </div>
//   `;
//   fatherDom.innerHTML = htmlStr;
// }
// generateLogin($(".mask"));
